<template>
  <div class="img-item">
    <img :src="item.picUrl" />
    <span v-show="item.playCount > 0">{{ item.playCount | formatNum }}</span>
  </div>
</template>

<script>
export default {
  props: {
    item: Object,
  },
  methods: {},
  filters: {
    formatNum(value) {
      let val = Math.floor(value / 1000);
      return val / 10 + "万";
    },
  },
};
</script>

<style lang="scss" scoped>
.img-item {
  position: relative;
  img {
    display: block;
    width: 100%;
  }

  span {
    opacity: 0.8;
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 12px;
    color: white;
    // background: url(data:image/svg+);
    padding-left: 12px;
    z-index: 2;
  }

  &::agter {
    content: "";
    width: 100%;
    height: 20px;
    // background-color: rgba(0, 0, 0, 0.5);
    background-color: red;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 3;
  }
}
</style>